<template>
    <view class="content">
        <mescroll-uni class="my-mescroll" ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption"
            @down="downCallback" @up="upCallback">

            <!-- 客户列表 -->
            <view class="cust-list">
                <!-- 预约客户 -->
                <view class="item" v-for="(item, index) in dataList" :key="index">
                    <!-- 客户信息 -->
                    <view class="user-info" @click="showDetail(item)">
                        <view class="head">
                            <image class="img" src="../../../static/images/icon_head.png" mode="aspectFill"></image>
                            <text class="name">{{item.customerName}}</text>
                        </view>
                        <view class="detail">
                            <!-- <text class="text">负责人：admin</text> -->
                            <text class="text">最后跟进时间：{{item.updateTime}}</text>
                        </view>
                    </view>
                    <!-- 位置信息 -->
                    <view class="address">
                        <view class="left">
                            <view class="detail">{{item.detailAddress}}</view>
                            <view class="distance">距离您{{(item.distances/1000).toFixed(2)}}km</view>
                        </view>
                        <view class="right" @click="goLocation(item)">
                            <image class="img" src="../../../static/images/icon_navi.png" mode=""></image>
                            <text class="text">到这里</text>
                        </view>
                    </view>
                </view>


            </view>
        </mescroll-uni>
    </view>
</template>

<script>
    import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
    import api from '@/api/api.js';
    export default {
        mixins: [MescrollMixin],
        data() {
            return {
                mescroll: undefined,
                downOption: {
                    auto: false //是否在初始化后,自动执行downCallback; 默认true
                },
                upOption: {
                    onScroll: true,
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        tip: '暂无相关数据'
                    }
                },
                dataList: [],
                searchContent: '',
                lng: undefined,
                lat: undefined,
            }
        },
        onLoad() {
            // 修改顶部导航背景色
            uni.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: '#39b54a',
                animation: {
                    duration: 400,
                    timingFunc: 'easeIn'
                }
            })


        },
        methods: {
            // mescroll组件初始化的回调,可获取到mescroll对象
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            /*下拉刷新的回调 */
            downCallback(mescroll) {
                mescroll.resetUpScroll()
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
                this.getNearCustomerList(page);
            },
            getNearCustomerList(page) {
                var that = this;

                uni.getLocation({
                    type: 'gcj02', //腾讯地图使用gcj02获取位置坐标
                    success: function(res) {
                        that.lng = res.longitude;
                        that.lat = res.latitude;
                        console.log(page.num)
                        var data = { page: page.num, lng: that.lng, lat: that.lat };
                        api.getNearCustomerList(data).then(
                            res => {
                                if (res.code == 200) {
                                    console.log(res.data)
                                    console.log(page.num)
                                    //设置列表数据
                                    if (page.num == 1) {
                                        that.dataList = res.data.list;

                                    } else {
                                        that.dataList = that.dataList.concat(res.data.list);

                                    }
                                    that.mescroll.endBySize(res.data.list.length, res.data.total);

                                } else {
                                    uni.showToast({
                                        icon: 'none',
                                        title: "请求失败",
                                    });
                                    that.dataList = null;
                                    mescroll.endErr();
                                    // that.mescroll.endSuccess(0);
                                }
                            },
                            rej => {}
                        );

                    },
                })


            },
            // 查看详情
            showDetail(item) {
                uni.navigateTo({
                    url: '../../customer/customDetail?customerId=' + item.customerId
                })
            },
            goLocation(item) {

                uni.openLocation({
                    latitude: parseFloat(item.lat),
                    longitude: parseFloat(item.lng),
                    scale: 18
                })
            }


        }
    }
</script>

<style scoped lang="scss">
    .cust-list {
        background: #fff;

        .item {
            padding: 20upx;
            border-bottom: 1px solid #f7f7f7;

            &:last-child {
                border-bottom: none;
            }

            .user-info {
                border-bottom: 1px solid #f7f7f7;

                .head {
                    display: flex;
                    align-items: center;

                    .img {
                        width: 50rpx;
                        height: 50rpx;
                        margin-right: 20rpx;
                    }

                    .name {
                        font-size: 32upx;
                        color: #333;
                    }
                }

                .detail {
                    padding-left: 70upx;
                    display: flex;
                    flex-direction: column;

                    .text {
                        font-size: 28upx;
                        color: #999;
                        padding: 8upx 0;
                    }
                }
            }

            .address {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 20upx;

                .left {
                    padding-right: 20upx;

                    .detail {
                        font-size: 24upx;
                        color: #999;
                        line-height: 1.6;
                    }

                    .distance {
                        font-size: 24upx;
                        color: #999;
                        line-height: 1.6;
                    }
                }

                .right {
                    width: 160upx;
                    height: 66upx;
                    border-radius: 33upx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px solid #2362FB;
                    flex-shrink: 0;

                    .img {
                        width: 30upx;
                        height: 30upx;
                        margin-right: 10upx;
                    }

                    .text {
                        font-size: 24upx;
                        color: #2362FB;
                    }
                }
            }
        }
    }
</style>